<template>
	<view class="bg-white ">
		
		<cu-custom bgColor="bg-gradual-pink" :isBack="true"><block slot="backText">返回</block>
			<block slot="content">立即报名</block>
		</cu-custom>
		<view class="joinview">
			<view class="join_sub_title">
				 请选择参赛项目
			</view>
			<view class="join_sub">
				<checkbox-group @change="subchange">
					<view v-for="(item,index) in ps.sub" :key="index">
						<label><checkbox :checked="item.name==''?true:false" :value="item.id+':'+item.name" />{{item.name}}</label>
						<view class="flex partner" v-if="item.name.indexOf('双')>0 && ps.double_type==1 "><label>搭档信息:</label><input class="partnername" @input="name_input" :data-sid="item.id" placeholder="姓名"/><input @input="tel_input" :data-sid="item.id" placeholder="电话" /></view>
					</view>
				</checkbox-group>
				
			</view>
			
			<view class="join_sub_title">
				 参赛费用
			</view>
			<view class="cu-form-group">
				<view>费用总计: {{money}}元</view>
			</view>
			<view class="cu-form-group">
				<view>支付方式:线下支付</view>
			</view>
			
			
		</view>
		<view class="joinbtn">
			<button class="bg-blue" @click="join">立即报名</button>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(option){
			this.mid=option.mid;
			this.userid =uni.getStorageSync("uid");
			this.openid =uni.getStorageSync("openid");
			if(this.userid.length<=0 || this.openid.length<=0){
				uni.showModal({
				    title: '登陆提示',
				    content: '您暂未登陆,是否马上登陆',
				    success: function (res) {
				        if (res.confirm) {
				           uni.switchTab({
				           	url:"/pages/tennis/user/index"
				           })
				        } else if (res.cancel) {
				           uni.navigateBack({
				           	
				           })
				        }
				    }
				});
				return;
			}
			
			uni.showLoading({
				title:'加载中..'
			})
			uni.request({
				url:"https://www.52tennis.cn/Match/GetPerJoinInfo",
				data: {
					matchid:option.mid
				},
				success:(data)=> {
					console.log(data);
					if(data.data.result==1){
						console.log(data.data.returnjson);
						this.ps=data.data.returnjson;
						
					}else{
						uni.showModal({
						    title: '错误提示',
						    content: data.data.msg,
						    success: function (res) {
						        if (res.confirm) {
						        } else if (res.cancel) {
						          
						        }
						    }
						});
					}
				},
				complete: () => {
					uni.hideLoading();
				}
			});
		},
		
		data() {
			return {
				userid:'',
				openid:'',
				mid:0,
				ps:{},
				joinsub:[],
				money:0,
				partner:[]
			}
		},
		methods: {
			subchange(e){
				console.log(e);
				let selectsub=e.detail.value;
				let count=0 ;
				this.joinsub=[];
				for(let i=0;i<selectsub.length;i++){
					if(selectsub[i].split(':')[1].indexOf("双")>0){
						count=count+2;
					}else{
						count++;
					}
					
				}
				this.joinsub=e.detail.value;
				this.money=this.ps.fee*count;
			}
			,
			join(e){
				var reg=/^1[3456789]\d{9}$/;
				for (let i = 0 ;i<this.joinsub.length;i++) {
					if (this.joinsub[i].split(':')[1].indexOf("双")>0) {
						let id = this.joinsub[i].split(':')[0];
						let partj=false;
						for (let j = 0 ;j<this.partner.length;j++) {
							if (this.partner[j].id==id) {
								partj=true;
								if(this.partner[j].name.length<=0 || !reg.test(this.partner[j].tel)){
									uni.showModal({
									    title: '错误提示',
									    content: "请将搭档姓名或手机号填写完整",
									    success: function (res) {
									        if (res.confirm) {
									        } else if (res.cancel) {
									          
									        }
									    }
									});
									return;
								}
							}
						}
						if(partj==false){
							uni.showModal({
							    title: '错误提示',
							    content: "请将搭档姓名或手机号填写完整",
							    success: function (res) {
							        if (res.confirm) {
							        } else if (res.cancel) {
							          
							        }
							    }
							});
							return;
						}
						
					}
				}
				
				let sbs="";
				let pars="";
				//添加..
				for (let i =0 ;i<this.joinsub.length;i++) {
					sbs+=this.joinsub[i]+",";
				}
				if(sbs.length>0){
					sbs=sbs.substring(0,sbs.length-1);
				}
				
				for(let i=0;i<this.partner.length;i++){
					pars+=this.partner[i].id+":"+this.partner[i].name+":"+this.partner[i].tel+",";
				}
			
				if(pars.length>0){
					pars= pars.substring(0,pars.length-1);
				}
				//console.log(pars)
				//console.log(sbs);
				//return;
				uni.request({
					url:"https://www.52tennis.cn/Match/InsertPerMatch",
					header:{
						'Content-Type': 'application/json;charset=UTF-8' //自定义请求头信息
					},
					method:'POST',
					data: {
						'userid':this.userid,
						'matchid':this.mid,
						'join_sub':sbs,
						'partnername':pars,
						'total_fee':this.money
					},success:(data)=> {
						console.log(data);
						if(data.data.result==1){
							uni.showToast({
								title: '报名成功',
								icon: 'success',
								mask: true,
								duration: 3000
							})
							setTimeout(function(){
								uni.navigateBack({
									
								})
							},2000)
							
						}else{
							uni.showModal({
							    title: '报名失败',
							    content: data.data.msg,
							    success: function (res) {
							        if (res.confirm) {
							           uni.navigateBack({
							           	
							           })
							        } else if (res.cancel) {
							           
							        }
							    }
							});
						}
					}
						
				})
				
			},
			name_input(e){
				let sid = e.currentTarget.dataset.sid;
				if(this.partner.length>0){
					let hasid=false;
					for(let i =0 ;i<this.partner.length;i++){
						if(this.partner[i].id==sid){
							this.partner[i].name=e.detail.value;
							hasid=true;
							break;
						}
					}
					if(!hasid){
						this.partner.push({id:sid,name:e.detail.value,tel:''});
					}
				}else{
					this.partner=[{id:sid,name:e.detail.value,tel:''}]
				}
			},
			tel_input(e){
				let sid = e.currentTarget.dataset.sid;
				if(this.partner.length>0){
					let hasid=false;
					for(let i =0 ;i<this.partner.length;i++){
						if(this.partner[i].id==sid){
							this.partner[i].tel=e.detail.value;
							hasid=true;
							break;
						}
					}
					if(!hasid){
						this.partner.push({id:sid,name:'',tel:e.detail.value});
					}
				}else{
					this.partner=[{id:sid,name:'',tel:e.detail.value}]
				}
			}
		}
	}
</script>

<style>
	.joinview{
		padding:30rpx;
	}
	.join_sub_title{
		color:#000000;
		font-size: 34rpx;
		padding: 15rpx 0rpx;
	}
	.join_sub checkbox{
		transform: scale(0.7);
		padding:5rpx
	}
	.partner{
		margin-left:65rpx;
	}
	.partner label{
		width: 130rpx;
	}
	.partner input{
		border: 1rpx solid #808080;
		padding-left: 5rpx;
		margin-left: 10rpx;
	}
	.partnername{
		width:150rpx;
	}
	.joinbtn{
		position: fixed;
		bottom: 5%;
		width: 100%;
	}
	.joinbtn button{
		width:90%;
		height:80rpx;
		line-height: 80rpx;
		font-size: 30rpx;
	}
</style>
